<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>layout 管理系统大布局 - Layui</title>
  <!--Layui的css-->
  <link rel="stylesheet"
        th:href="@{/libs/layui/css/layui.css}"
        media="all"></head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div>
    <!-- 头部区域（可配合layui 已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <!-- 移动端显示 -->
      <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
        <i class="layui-icon layui-icon-spread-left"></i>
      </li>

      <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">nav groups</a>
        <dl class="layui-nav-child">
          <dd><a href="">menu 11</a></dd>
          <dd><a href="">menu 22</a></dd>
          <dd><a href="">menu 33</a></dd>
        </dl>
      </li>
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-md-inline-block">
        <a href="javascript:;">
          <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
          tester
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">Your Profile</a></dd>
          <dd><a href="">Settings</a></dd>
          <dd><a href="">Sign out</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
        <a href="javascript:;">
          <i class="layui-icon layui-icon-more-vertical"></i>
        </a>
      </li>
    </ul>
  </div>

  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree" lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">menu group 1</a>
          <dl class="layui-nav-child">
            <dd><a th:href="@{w}">学生管理</a></dd>
            <dd><a th:href="@{wcl}">教室管理</a></dd>
            <dd><a th:href="@{wc}">班级管理</a></dd>
            <dd><a th:href="@{wdor}">宿舍管理</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">教室管理</a>
          <dl class="layui-nav-child">
            <dd><a th:href="@{wcl}">教室管理</a></dd>
            <!--            <dd><a href="javascript:;">list 2</a></dd>
                        <dd><a href="">超链接</a></dd>-->
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">班级管理</a>
          <dl class="layui-nav-child">
            <dd><a th:href="@{wc}">班级管理</a></dd>
            <!--            <dd><a href="javascript:;">list 2</a></dd>
                        <dd><a href="">超链接</a></dd>-->
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">宿舍管理</a>
          <dl class="layui-nav-child">
            <dd><a th:href="@{wdor}">宿舍管理</a></dd>
            <!--            <dd><a href="javascript:;">list 2</a></dd>
                        <dd><a href="">超链接</a></dd>-->
          </dl>
        </li>

        <li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>
        <li class="layui-nav-item"><a href="">the links</a></li>
      </ul>
    </div>
  </div>

  <div class="layui-body">
    <!-- 内容主体区域 -->
    <!--模糊查询-->
    <div style="font-size: 15px">
      <form id="dataFrm" method="post" class="layui-form  layui-form-pane" lay-filter="dataFrm">

        <div class="layui-form-item" style="width: 275px;float: left;margin: 21px 0px 0px 0px">
          <label class="layui-form-label">姓名</label>
          <div class="layui-input-block">
            <input type="text" id="stuName" name="stuName"
                     autocomplete="off" placeholder="请输入姓名" class="layui-input">
          </div>
        </div>

        <div class="layui-form-item"  style="width: 275px;float: left;margin: -40px 0px 21px 335px" >

            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
              <input type="tel" id="mobile" name="mobile"
                        autocomplete="off" placeholder="请输入手机号" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" style="width: 275px;float: left;margin: -59px -28px -29px 700px" >
          <label class="layui-form-label">性别</label>
          <div class="layui-input-block">
            <select name="sex" id="sex" lay-filter="sex">
              <option value=""></option>
              <option value="F">女生</option>
              <option value="M">男生</option>
            </select>
          </div>
        </div>

        <div class="layui-form-item" style="width: 275px;float: left;margin: 21px 0px 0px 0px" >
          <label class="layui-form-label">年龄</label>
          <div class="layui-input-block" >
            <input type="text" id="age" name="age"  autocomplete="off" placeholder="请输入年龄" class="layui-input">
          </div>
        </div>

        <div class="layui-form-item" style="width: 275px;float: left;margin: -40px 0px 31px 335px">
          <label class="layui-form-label">身份证号</label>
          <div class="layui-input-block" >
            <input type="text" id="idNum" name="idNum" autocomplete="off" placeholder="请输入身份证号" class="layui-input">
          </div>
        </div>
        <!--查询按钮-->
        <div class="layui-btn-container"  style="float: left; margin: 0px 0px 0px 0px">
          <button type="button" class="layui-btn layui-btn-lg layui-btn-normal"
                  lay-submit lay-filter="doSearch"
                  style="margin: -15px 0px -5px 250px">
            <i class="layui-icon layui-icon-search"></i>查询</button>
          <button type="reset" class="layui-btn layui-btn-lg layui-btn-warm"
                  style="margin: -15px 0px -5px 250px">
            <i class="layui-icon layui-icon-chat"></i>重置</button>
          <!--
                  <button type="button" onclick="findStudentInfo()" class="layui-btn layui-btn-normal">查询</button>
          -->
        </div>
      </form>
    </div>

    <!-- 学生数据表格开始 -->
    <div style="float: left;width:1100px">
      <!-- 表格 -->
      <table class="layui-hide" id="studentTable" lay-filter="studentTable" style="height:150px" ></table>

      <!-- 头部工具栏 -->
      <script type="text/html" id="studentToolbar">
        <div class="layui-btn-container">

          <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-circle"></i>添加账单</button>
          <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDelete" > <i class="layui-icon layui-icon-delete"></i>批量删除</button>

          <button class="layui-btn layui-btn-sm" >获取选中行数据</button>
          <button class="layui-btn layui-btn-sm" >获取选中数目</button>
          <button class="layui-btn layui-btn-sm" >验证是否全选</button>
        </div>
      </script>

      <!-- 行工具栏 -->
      <script type="text/html" id="barDemo">

        <button type="button" class="layui-btn layui-btn-normal layui-btn-radius" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>   编辑</button>
        <button type="button" class="layui-btn layui-btn-warm layui-btn-radius" lay-event="delete" ><i class="layui-icon layui-icon-delete"></i>删除</button>
      </script>

    </div>


<!--
      <div style="padding: 15px;">内容主体区域。记得修改 layui.css 和 js 的路径</div>
-->
  </div>

  <div class="layui-footer">
    <!-- 底部固定区域 -->
    底部固定区域
  </div>
</div>
<!--   Layui的js-->
<script type="text/javascript"
        th:src="@{/libs/layui/layui.js}"
        charset="utf-8"></script><script>
  //JS
  layui.use(['element', 'layer', 'util'], function(){
    var element = layui.element
            ,layer = layui.layer
            ,util = layui.util
            ,$ = layui.$;

    //头部事件
    util.event('lay-header-event', {
      //左侧菜单事件
      menuLeft: function(othis){
        layer.msg('展开左侧菜单的操作', {icon: 0});
      }
      ,menuRight: function(){
        layer.open({
          type: 1
          ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
          ,area: ['260px', '100%']
          ,offset: 'rt' //右上角
          ,anim: 5
          ,shadeClose: true
        });
      }
    });

  });
</script>

<!-- 添加和修改账单的弹出层开始 -->
<div id="addOrUpdateBillDiv" style="display: none;margin: 10px;">
  <form id="dataFrm1" method="post" class="layui-form layui-form-pane " lay-filter="dataFrm1">
    <!-- 隐藏域，保存当前账单的ID -->
    <input type="hidden" name="stuId" id="stuId">

    <div class="layui-form-item">
      <label class="layui-form-label">学生姓名：</label>
      <div class="layui-input-block">
        <input type="text" name="stuName" id="stuNames"  placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">手机号：</label>
      <div class="layui-input-block">
        <input type="text" name="mobile" id="mobiles" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">性别</label>
      <div class="layui-input-block">
        <input type="radio" name="sex" class="sex" value="M" title="男">
        <input type="radio" name="sex" class="sex" value="F" title="女">
      </div>
    </div>

    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">出生日期：</label>
        <div class="layui-input-block">
          <input type="text" name="birthday" id="birthday" autocomplete="off" class="layui-input">
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">身份类型：</label>
      <div class="layui-input-block">
        <select name="idType" id="idTypes" >
          <option value='' >请选择</option>
          <option value='01'>身份证</option>
          <option value='02'>军人证</option>
          <option value='03'>护照</option>
          <option value='04'>户口本</option>
          <option value='05'>外国人永久居留证</option>
          <option value='06'>武警证</option>
          <option value='07'>公章</option>
          <option value='08'>工商营业执照</option>
          <option value='09'>法人代码证</option>
          <option value='10'>学生证</option>
          <option value='11'>士兵证</option>
          <option value='16'>港澳居民来往内地通行证</option>
          <option value='17'>台湾居民来往大陆通行证</option>
          <option value='18'>其他证件类型</option>
        </select>
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">身份证号</label>
      <div class="layui-input-block">
        <input type="text" name="idNum" id="idNums" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>


    <div class="layui-form-item">
      <label class="layui-form-label">籍贯：</label>
      <div class="layui-input-inline">
        <select name="provinceid" id="provinceid" lay-filter="provinceid">
          <option value="" checked>请选择省</option>

        </select>
      </div>
      <div class="layui-input-inline">
        <select name="cityid" id="cityid" lay-filter="cityid">
          <option value="" checked>请选择市</option>

        </select>
      </div>
      <div class="layui-input-inline">
        <select name="areaid" id="areaid" lay-filter="areaid">
          <option value="" checked>请选择县/区</option>

        </select>
      </div>
      <div class="layui-form-mid layui-word-aux"></div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">详细地址：</label>
      <div class="layui-input-block">
        <input type="text" name="title"  placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item" style="text-align: center;">
      <button type="button" class="layui-btn" lay-submit lay-filter="doSubmit">确认添加</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </form>
</div>
<!-- 添加和修改账单的弹出层结束-->


<!--jquery的js-->
<script type="text/javascript"
        th:src="@{/libs/jquery/jquery-3.5.1.js}"></script>
<!--引入自己的JS代码-->
<script type="text/javascript"
        th:src="@{/js/student/stulist.js}"></script>

</body>
</html>
